<template>
	<view class="page">
		<!-- 加载动画 -->
		<view class="loading-container" v-if="isLoading">
			<view class="loading-spinner"></view>
			<text class="loading-text">加载中...</text>
		</view>
		
		<view :class="{ 'content-hidden': isLoading }">
			<view class="user-card" @click="navigateTo('/pages/personalinfo/editinfo')">
				<view class="user-header">
					<view class="avatar-container">
						<image class="avatar" :src="user.avatarUrl"></image>
						<!-- 性别标识 -->
						<view class="gender-badge" :class="genderClass">
							<image v-if="user.gender === '男'" src="/static/icons/male.png"></image>
							<image v-else-if="user.gender === '女'" src="/static/icons/female.png"></image>
							<image v-else src="/static/icons/unknown.png"></image>
						</view>
					</view>
					<view class="user-info">
						<view class="name">{{ user.name }}</view>
						<view class="status">
							<text class="status-badge" v-show="user.role == '用户'">{{ user.politicalStatus }}</text>
							<text class="status-badge" v-show="user.role != '用户'">{{ user.role }}</text>
						</view>
						<view class="account">账号：{{ user.account }}</view>
					</view>
				</view>
			</view>

			<view class="section-title">账号与安全</view>
			<view class="card menu-card">
				<view class="menu">
					<view class="menu-item" v-for="v in filteredMenus1" :key="v.id" @click="navigateTo(v.page)">
						<view class="menu-left">
							<image class="menu-icon" :src="v.icon"></image>
							<view class="menu-name">{{ v.name }}</view>
						</view>
						<image class="arrow" v-if="v.arrow" src="/static/center4/right.png"></image>
					</view>
				</view>
			</view>

			<view class="section-title">其他设置</view>
			<view class="card menu-card">
				<view class="menu">
					<view class="menu-item" v-for="v in filteredMenus2" :key="v.id" @click="handleMenuClick(v)">
						<view class="menu-left">
							<image class="menu-icon" :src="v.icon"></image>
							<view class="menu-name">{{ v.name }}</view>
						</view>
						<image class="arrow" v-if="v.arrow" src="/static/center4/right.png"></image>
					</view>
				</view>
			</view>

			<view class="app-info">
				<text>党组织管理系统 v1.0.0</text>
			</view>
		</view>
	</view>
</template>


<script setup>
import {
	onMounted,
	ref,
	computed,
} from 'vue';
import {
	onShow,
	onLoad,
} from '@dcloudio/uni-app';
import {
	checkIfContact,
	navigateTo
} from '@/common/js/common';
import {
	userInfo
} from '@/common/js/api';


const userId = uni.getStorageSync('userId');

const menus1 = ref([{
	id: 1,
	name: '修改密码',
	icon: '/static/icons/change_pwd.png',
	page: '/pages/personalinfo/change_pwd',
	arrow: true,
	roles: []
},
{
	id: 2,
	name: '我的会议',
	icon: '/static/personalImgs/我的会议.png',
	page: '/pages/meeting/meeting',
	arrow: true,
	roles: ['用户']
},
{
	id: 0,
	name: '我的谈话',
	icon: '/static/personalImgs/我的谈话.png',
	page: '/pages/mytalks/mytalks',
	arrow: true,
	roles: ['用户']
},
{
	id: 4,
	name: '我的入党申请书',
	icon: '/static/personalImgs/我的入党申请书.png',
	page: '/pages/applyFor/myapplies',
	arrow: true,
	roles: ['用户']
},
{
	id: 5,
	name: '我的入党志愿书',
	icon: '/static/personalImgs/我的入党志愿书.png',
	page: '/pages/volunteerFor/myvolunteers',
	arrow: true,
	roles: ['用户']
}
]);

const menus2 = ref([
	{
		id: 3,
		name: '退出登录',
		icon: '/static/center4/out.png',
		arrow: false,
		roles: []
	}
]);

// 当前登录用户信息
const user = ref({
	account: '',
	age: 0,
	avatarUrl: '/static/center4/avatar.png',
	gender: null,
	name: '匿名用户',
	phone: '',
	pwd: ''
});

var isContact = false;

// 根据用户性别返回对应的样式类
const genderClass = computed(() => {
	if (user.value.gender === '男') {
		return 'gender-male';
	} else if (user.value.gender === '女') {
		return 'gender-female';
	} else {
		return 'gender-unknown';
	}
});

// 根据用户角色过滤菜单项
const filteredMenus1 = computed(() => {
	return menus1.value.filter(menu => {
		if (!menu.roles || !menu.roles.length) return true;
		if (isContact) {
			return false;
		}
		return menu.roles.includes(user.value.role) ;
	});
});

const filteredMenus2 = computed(() => {
	return menus2.value.filter(menu => {
		if (!menu.roles || !menu.roles.length) return true;
		return menu.roles.includes(user.value.role);
	});
});

// 处理菜单点击事件
const handleMenuClick = (item) => {
	if (item.page) {
		// 如果有页面路径，则导航到该页面
		navigateTo(item.page);
	} else if (item.id === 3) {
		// 退出登录
		uni.showModal({
			title: '提示',
			content: '确定要退出登录吗？',
			success: function (res) {
				if (res.confirm) {
					// 清除token
					uni.removeStorageSync('token');
					// 返回登录页
					uni.reLaunch({
						url: '/pages/login/login'
					});
				}
			}
		});
	}
};

// 添加加载状态
const isLoading = ref(false);

// 修改 onShow
onShow(async() => {
	isLoading.value = true;
	isContact = await checkIfContact(userId);
	userInfo(userId).then(result => {
		user.value = result;
		console.log(user.value.avatarUrl);
		// 数据加载完成后隐藏加载动画
		setTimeout(() => {
			isLoading.value = false;
		}, 500);
	});
});
</script>

<style lang="scss">
.page {
	background: #f8f8f8;
	min-height: 100vh;
	padding: 30rpx;
	box-sizing: border-box;
}

.user-card {
	background: linear-gradient(135deg, #ff7a45, #ff9c6e);
	border-radius: 20rpx;
	padding: 40rpx 30rpx;
	margin-bottom: 40rpx;
	box-shadow: 0 8rpx 20rpx rgba(255, 122, 69, 0.15);
	color: #fff;

	.user-header {
		display: flex;
		align-items: center;
	}

	.avatar-container {
		position: relative;
		margin-right: 30rpx;

		.avatar {
			width: 140rpx;
			height: 140rpx;
			border-radius: 50%;
			border: 4rpx solid rgba(255, 255, 255, 0.6);
		}

		.edit-badge {
			position: absolute;
			bottom: 0;
			right: 0;
			background: #fff;
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 24rpx;
				height: 24rpx;
			}
		}

		.gender-badge {
			position: absolute;
			bottom: 10rpx;
			right: 10rpx;
			width: 36rpx;
			height: 36rpx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
			border: 2rpx solid rgba(255, 255, 255, 0.8);

			image {
				width: 20rpx;
				height: 20rpx;
			}

			&.gender-male {
				background: #4a89dc;
			}

			&.gender-female {
				background: #ed5565;
			}

			&.gender-unknown {
				background: #999;
			}
		}
	}

	.user-info {
		flex: 1;

		.name {
			font-size: 40rpx;
			font-weight: bold;
			margin-bottom: 10rpx;
		}

		.status {
			margin-bottom: 16rpx;

			.status-badge {
				background: rgba(255, 255, 255, 0.2);
				padding: 6rpx 16rpx;
				border-radius: 30rpx;
				font-size: 24rpx;
			}
		}

		.account {
			font-size: 24rpx;
			opacity: 0.8;
		}
	}
}

.section-title {
	font-size: 28rpx;
	color: #666;
	margin: 30rpx 0 20rpx 20rpx;
	font-weight: 500;
}

.card {
	background: #fff;
	border-radius: 20rpx;
	margin-bottom: 30rpx;
	overflow: hidden;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.menu-card {
	.menu {
		.menu-item {
			display: flex;
			height: 100rpx;
			align-items: center;
			padding: 0 30rpx;
			box-sizing: border-box;
			justify-content: space-between;
			position: relative;

			&:active {
				background: #f9f9f9;
			}

			&:not(:last-child):after {
				content: '';
				position: absolute;
				left: 90rpx;
				right: 0;
				bottom: 0;
				height: 1rpx;
				background: #f5f5f5;
			}

			.menu-left {
				display: flex;
				align-items: center;

				.menu-icon {
					height: 40rpx;
					width: 40rpx;
					margin-right: 24rpx;
				}

				.menu-name {
					font-size: 28rpx;
					color: #333;
				}
			}

			.arrow {
				width: 24rpx;
				height: 24rpx;
				opacity: 0.5;
			}
		}
	}
}

.app-info {
	text-align: center;
	padding: 40rpx 0;
	color: #999;
	font-size: 24rpx;
}

// 添加加载动画样式
.loading-container {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(255, 255, 255, 0.9);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 999;
}

.loading-spinner {
	width: 60rpx;
	height: 60rpx;
	border: 6rpx solid #f3f3f3;
	border-top: 6rpx solid #ff7a45;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	margin-bottom: 20rpx;
}

.loading-text {
	color: #666;
	font-size: 28rpx;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.content-hidden {
	opacity: 0;
	transition: opacity 0.3s ease;
}
</style>